import React, { useMemo, useState } from "react";
import cls from "@/styles/pages/users/Users.module.scss";
import { useNavigate } from "react-router-dom";
import { generatePredictionReport, usePrediction } from "@/api/prediction";
import { PredictionTable } from "@/feature/PredictionTable/PredictionTable";
import { OptionI } from "@/models/common";
import { useSpecializationType } from "@/api/specialization";
import { MonthSelector } from "@/components/Dashboard/MonthSelector";
import { YearSelector } from "@/components/Dashboard/YearSelector";
import { Button } from "@/ui/Button/Button";
import { getMonthIdByStatus } from "@/feature/NewEventsTable/helper";

const Prediction = () => {
  const navigate = useNavigate();
  const [month, setMonth] = useState<OptionI>();
  const [year, setYear] = useState<OptionI>();
  const params = useMemo(() => {
    return new URLSearchParams({
      month: String(month?.id || 2),
      year: String(year?.id || 2024),
    });
  }, [month, year]);
  const [, rawData, isLoading] = usePrediction(params);
  const data = useMemo(() => {
    if (!rawData) return [];
    if (!getMonthIdByStatus(rawData)) return [];
    return [getMonthIdByStatus(rawData)];
  }, [rawData]);
  const [, specData] = useSpecializationType();

  return (
    <div className="page-wrapper">
      <div className={cls.header}>
        <div className={cls.selectors}>
          <div className={cls.selectors_right}>
            <MonthSelector setMonth={setMonth} />
            <YearSelector setYear={setYear} />
          </div>
        </div>
      </div>
      <PredictionTable data={data} isLoading={isLoading} specData={specData} />
      <div className={cls.selectors_right}>
        <Button
          color="#6666FF"
          onClick={(e) => {
            generatePredictionReport(Number(month.id), Number(year.id));
          }}
          disabled={data.length === 0}
        >
          Скачать
        </Button>
        <Button
          color="#6666FF"
          onClick={(row) => {
            navigate(`/gantt/?monthId=${data[0].id}`);
          }}
          disabled={data.length === 0}
        >
          Перейти к расписанию
        </Button>
      </div>
    </div>
  );
};

export default Prediction;
